{% extends "base/base-sidebar.html" %}

{% block title %}Egg Checker{% endblock %}

{% block head %}
	<script type="module" src="static/js/jquery.min.mjs"></script>
	<script type="module">
	</script>
{% endblock %}

{% block main %}
<section class="pla-section-results">
        <div data-pla-messages></div>
        <div class="pla-results" data-pla-results>
            <p class="pla-results-message">Search to begin</p>
        </div>
    </section>
{% endblock %}

{% block sidebar %}
    <section class="pla-section-options">
	
		<div class="tab">
			<button class="tablinks" id="defaultOpen" data-pla-tab-for="States">RNG Info</button>
			<button class="tablinks" data-pla-tab-for="Parents">Parent Info</button>
		</div>
		
		<div id="States" class="tabcontent">
		
		<div class="pla-control">
            <label for="inputs0">S0</label>
            <input id="inputs0" placeholder="Input S[0]">
        </div>
		
		<div class="pla-control">
            <label for="inputs1">S1</label>
            <input id="inputs1" placeholder="Input S[1]">
        </div>
		
		<div class="pla-control">
            <label for="inputs2">S2</label>
            <input id="inputs2" placeholder="Input S[2]">
        </div>
		
		<div class="pla-control">
            <label for="inputs3">S3</label>
            <input id="inputs3" placeholder="Input S[3]">
        </div>
		
		<div class="pla-control">
            <label for="minadvances">Starting Advance:</label>
            <input type="number" id="minadvances" placeholder="Advances">
        </div>
		
		<div class="pla-control">
            <label for="advances">Max Advance:</label>
            <input type="number" id="advances" placeholder="Advances">
        </div>		
		
		<div class="pla-control">
            <label for="delay">Delay:</label>
            <input type="number" id="delay" placeholder="Delay">
        </div>
		
		
		<div class="pla-control-spaced">
			<label for="masuda">Masuda Method?</label>
			<input type="checkbox" id="masuda">
		</div>
		
		<div class="pla-control-spaced">
			<label for="shinycharm">Shiny Charm?</label>
			<input type="checkbox" id="shinycharm">
		</div>
		
		<div class="pla-control-spaced">
			<label for="ovalcharm">Oval Charm?</label>
			<input type="checkbox" id="ovalcharm">
		</div>
		
		<div class="pla-control">
            <label for="tid">TID:</label>
            <input type="number" id="tid" placeholder="tid">
        </div>
		
		<div class="pla-control">
            <label for="sid">SID:</label>
            <input type="number" id="sid" placeholder="sid">
        </div>
		
		
		<button type="button" class="pla-button expandable-control">Advanced Options</button>
			<div class="expandable">
			
			<label>Min IVs:</label>
			<div class="pla-control-spaced">
				<input type="number" id="minhp" placeholder="HP" size="2" min="0" max="31" class="ivbox"> <input type="number" id="minatk" placeholder="ATK" size="2" min="0" max="31" class="ivbox"> <input type="number" id="mindef" placeholder="DEF" size="2" min="0" max="31" class="ivbox"><input type="number" id="minspa" placeholder="SpA" size="2" min="0" max="31" class="ivbox"> <input type="number" id="minspd" placeholder="SpD" size="2" min="0" max="31" class="ivbox"> <input type="number" id="minspe" placeholder="Spe" size="2" min="0" max="31" class="ivbox">
			</div>

			<label>Max IVs:</label>
			<div class="pla-control-spaced">
				<input type="number" id="maxhp" placeholder="HP" size="2" min="0" max="31" class="ivbox"> <input type="number" id="maxatk" placeholder="ATK" size="2" min="0" max="31" class="ivbox"> <input type="number" id="maxdef" placeholder="DEF" size="2" min="0" max="31" class="ivbox"><input type="number" id="maxspa" placeholder="SpA" size="2" min="0" max="31" class="ivbox"> <input type="number" id="maxspd" placeholder="SpD" size="2" min="0" max="31" class="ivbox"> <input type="number" id="maxspe" placeholder="Spe" size="2" min="0" max="31" class="ivbox">
			</div>
			
			</div>
			
			</div>
			
			<div id="Parents" class="tabcontent">
			
			<div class="pla-control">
				<label for="compat">Compatibility:</label>
				<select id="compat">
					<option value="20">The two don't seem to like each other</option>
					<option value="50">The two seem to get along</option>
					<option value="70">The two seem to get along very well</option>
				</select>
			</div>
			
			<label>Male Parent IVs:</label>
			<div class="pla-control-spaced">
				<input type="number" id="a_hp" placeholder="HP" size="2" min="0" max="31" class="ivbox"> <input type="number" id="a_atk" placeholder="ATK" size="2" min="0" max="31" class="ivbox"> <input type="number" id="a_def" placeholder="DEF" size="2" min="0" max="31" class="ivbox"><input type="number" id="a_spa" placeholder="SpA" size="2" min="0" max="31" class="ivbox"> <input type="number" id="a_spd" placeholder="SpD" size="2" min="0" max="31" class="ivbox"> <input type="number" id="a_spe" placeholder="Spe" size="2" min="0" max="31" class="ivbox">
			</div>
			
			<div class="pla-control">
			<label for="a_nature">Nature: </label>
			<select id="a_nature" class="chosen-select-single">
				<option value="Hardy">Hardy</option>
				<option value="Lonely">Lonely</option>
				<option value="Brave">Brave</option>
				<option value="Adamant">Adamant</option>
				<option value="Naughty">Naughty</option>
				<option value="Bold">Bold</option>
				<option value="Docile">Docile</option>
				<option value="Relaxed">Relaxed</option>
				<option value="Impish">Impish</option>
				<option value="Lax">Lax</option>
				<option value="Timid">Timid</option>
				<option value="Hasty">Hasty</option>
				<option value="Serious">Serious</option>
				<option value="Jolly">Jolly</option>
				<option value="Naive">Naive</option>
				<option value="Modest">Modest</option>
				<option value="Mild">Mild</option>
				<option value="Quiet">Quiet</option>
				<option value="Bashful">Bashful</option>
				<option value="Rash">Rash</option>
				<option value="Calm">Calm</option>
				<option value="Gentle">Gentle</option>
				<option value="Sassy">Sassy</option>
				<option value="Careful">Careful</option>
				<option value="Quirky">Quirky</option>
			</select>
			</div>
			
			<div class="pla-control-spaced">
			<label for="a_ditto">Ditto?</label>
			<input type="checkbox" id="a_ditto">
			</div>
			
			<div class="pla-control">
			<label for="a_ability">Parent Ability:</label>
			<select id="a_ability">
				<option value="0">1</option>
				<option value="1">2</option>
				<option value="2">HA</option>
			</select>
			</div>
			
			<div class="pla-control">
			<label for="a_item">Parent Item:</label>
			<select id="a_item">
				<option value="0">No Item</option>
				<option value="1">Everstone</option>
				<option value="8">Destiny Knot</option>
			</select>
			</div>
			<p><p>
			<label>Female Parent IVs:</label>
			<div class="pla-control-spaced">
				<input type="number" id="b_hp" placeholder="HP" size="2" min="0" max="31" class="ivbox"> <input type="number" id="b_atk" placeholder="ATK" size="2" min="0" max="31" class="ivbox"> <input type="number" id="b_def" placeholder="DEF" size="2" min="0" max="31" class="ivbox"><input type="number" id="b_spa" placeholder="SpA" size="2" min="0" max="31" class="ivbox"> <input type="number" id="b_spd" placeholder="SpD" size="2" min="0" max="31" class="ivbox"> <input type="number" id="b_spe" placeholder="Spe" size="2" min="0" max="31" class="ivbox">
			</div>
			
			<div class="pla-control">
			<label for="b_nature">Nature: </label>
			<select id="b_nature" class="chosen-select-single">
				<option value="Hardy">Hardy</option>
				<option value="Lonely">Lonely</option>
				<option value="Brave">Brave</option>
				<option value="Adamant">Adamant</option>
				<option value="Naughty">Naughty</option>
				<option value="Bold">Bold</option>
				<option value="Docile">Docile</option>
				<option value="Relaxed">Relaxed</option>
				<option value="Impish">Impish</option>
				<option value="Lax">Lax</option>
				<option value="Timid">Timid</option>
				<option value="Hasty">Hasty</option>
				<option value="Serious">Serious</option>
				<option value="Jolly">Jolly</option>
				<option value="Naive">Naive</option>
				<option value="Modest">Modest</option>
				<option value="Mild">Mild</option>
				<option value="Quiet">Quiet</option>
				<option value="Bashful">Bashful</option>
				<option value="Rash">Rash</option>
				<option value="Calm">Calm</option>
				<option value="Gentle">Gentle</option>
				<option value="Sassy">Sassy</option>
				<option value="Careful">Careful</option>
				<option value="Quirky">Quirky</option>
			</select>
			</div>
			
			<div class="pla-control-spaced">
			<label for="b_ditto">Ditto?</label>
			<input type="checkbox" id="b_ditto">
			</div>
			
			<div class="pla-control">
			<label for="b_ability">Parent Ability:</label>
			<select id="b_ability">
				<option value="0">1</option>
				<option value="1">2</option>
				<option value="2">HA</option>
			</select>
			</div>
			
			<div class="pla-control">
			<label for="b_item">Parent Item:</label>
			<select id="b_item">
				<option value="0">No Item</option>
				<option value="1">Everstone</option>
				<option value="8">Destiny Knot</option>
			</select>
			</div>
			
			<div class="pla-control">
			<label for="genderratio">Gender Ratio:</label>
			<select id="genderratio">
				<option value="31" class="ivbox">1 &#9792; : 7 &#9794;</option>
				<option value="63">1 &#9792; : 4 &#9794;</option>
				<option value="127">1 &#9792; : 1 &#9794;</option>
				<option value="191">3 &#9792; : 1 &#9794;</option>
				<option value="0"> &#9794; Only</option>
				<option value="254"> &#9792; Only</option>
				<option value="255"> Genderless</option>
			</select>
		</div>
		
			</div>
		
		<div class="pla-control">
			<label for="selectfilter">Select Filter:</label>
			<select id="selectfilter">
				<option value="no_filter">No Filter</option>
				<option value="is_shiny">Shiny Only</option>
				<option value="is_square">Square Shiny Only</option>
			</select>
		</div>
		
        
        <div class="pla-control-actions">
            <button class="pla-button pla-button-action" id="pla-button-checkegg">Check Egg</button>
        </div>
    </section>

	<section>
        <!--<div class="pla-control-spaced">
            <label for="mmoShinyFilter">Shiny or Alpha</label>
            <input type="checkbox" id="mmoShinyOrAlphaFilter">
        </div>-->
		

        <div class="pla-control-spaced">
            <label for="mmoShinyFilter">Filter Results: Shiny Only</label>
            <input type="checkbox" id="mmoShinyFilter">
        </div>

        <!--<div class="pla-control-spaced">
            <label for="mmoAlphaFilter">Filter Results: Alpha Only</label>
            <input type="checkbox" id="mmoAlphaFilter">
        </div>-->
        
        <div class="pla-control">
			<label for="naturefilter">Filter Results: Nature:</label>
			<select id="naturefilter" class="chosen-select" multiple>
				<option value="any">Any</option>
				<option value="hardy">Hardy</option>
				<option value="lonely">Lonely</option>
				<option value="brave">Brave</option>
				<option value="adamant">Adamant</option>
				<option value="naughty">Naughty</option>
				<option value="bold">Bold</option>
				<option value="docile">Docile</option>
				<option value="relaxed">Relaxed</option>
				<option value="impish">Impish</option>
				<option value="lax">Lax</option>
				<option value="timid">Timid</option>
				<option value="hasty">Hasty</option>
				<option value="serious">Serious</option>
				<option value="jolly">Jolly</option>
				<option value="naive">Naive</option>
				<option value="modest">Modest</option>
				<option value="mild">Mild</option>
				<option value="quiet">Quiet</option>
				<option value="bashful">Bashful</option>
				<option value="rash">Rash</option>
				<option value="calm">Calm</option>
				<option value="gentle">Gentle</option>
				<option value="sassy">Sassy</option>
				<option value="careful">Careful</option>
				<option value="quirky">Quirky</option>
			</select>
		</div>
		
		<div class="pla-control">
			<label for="abilityfilter">Filter Results: Ability:</label>
			<select id="abilityfilter" class="chosen-select" multiple>
				<option value="any">Any</option>
				<option value="0">1</option>
				<option value="1">2</option>
				<option value="2">HA</option>
			</select>
		</div>
		
    </section>
{% endblock %}

{% block templates %}
    <template data-pla-results-template>
	<!--<details>
	<summary>Advance: <span data-pla-results-advances></span> Shiny: <span data-pla-results-shine></span> <span data-pla-results-spawn></span></summary>-->
        <div class="pla-results-item" data-pla-results-template>
            <ul class="pla-results-heading pla-results-ul">
                <li class="pla-results-sprite" data-pla-results-sprite></li>
                <li class="pla-results-species" data-pla-results-species></li>
				<li></li>
            </ul>
            
			<ul class="pla-results-ul">
				<li><span class="pla-results-label">Advances:</span> <span data-pla-results-adv></span></li>
				<li><span class="pla-results-label">Shiny:</span> <span class="float -left" data-pla-results-shinysprite><span class="float -right" data-pla-results-shiny></span></span></li>
                <li><span class="pla-results-label">Nature:</span> <span data-pla-results-nature></span></li>
                <li><span class="pla-results-label">Gender:</span> <span data-pla-results-gender></span></li>			
                <li><span class="pla-results-label">Ability:</span> <span data-pla-results-ability></span></li>
			</ul>
			<ul class="pla-results-ul">
				<li><span class="pla-results-label">Egg Seed:</span> <span data-pla-results-eseed></span></li>
                <li><span class="pla-results-label">PID:</span> <span data-pla-results-pid></span></li>
				<li><span class="pla-results-label">EC:</span> <span data-pla-results-ec></span></li>
            </ul>

            <div class="pla-results-ivs-container">
                <span class="pla-results-label">IVs:</span>
                <ul class="pla-results-ivs">
                    <li class="pla-results-ivs-hp" data-pla-results-ivs-hp></li>
                    <li class="pla-results-ivs-att" data-pla-results-ivs-att></li>
                    <li class="pla-results-ivs-def" data-pla-results-ivs-def></li>
                    <li class="pla-results-ivs-spa" data-pla-results-ivs-spa></li>
                    <li class="pla-results-ivs-spd" data-pla-results-ivs-spd></li>
                    <li class="pla-results-ivs-spe" data-pla-results-ivs-spe></li>
                </ul>
            </div>
         </div>
		 </template>
{% endblock %}

{% block script %}
    <script type="module" src="{{ url_for('static', filename='js/begg.js') }}"></script>
{% endblock %}